<template>
  <div v-if="checkedList.length" class="checkbox-control">
    <slot>
      <div class="deselect-all" @click="uncheck">取消选中</div>
      <div class="number-of-selected">已选{{ checkedList.length }}条</div>
    </slot>
    <slot name="control">
      <a-button @click="batchDeletion">批量删除</a-button>
      <a-button @click="batchDownload">批量下载</a-button>
    </slot>
  </div>
</template>

<script setup lang="ts">
  export interface CheckboxControlProps {
    checkedList: string[]
  }

  const props = withDefaults(defineProps<CheckboxControlProps>(), {
    checkedList: () => []
  })

  const emits = defineEmits<{
    (e: 'update:checkedList', checkedList: string[]): void
    (e: 'uncheck', checkedList: string[]): void
    (e: 'batchDeletion', checkedList: string[]): void
    (e: 'batchDownload', checkedList: string[]): void
  }>()

  const uncheck = () => {
    emits('update:checkedList', [])
    emits('uncheck', props.checkedList)
  }

  const batchDeletion = () => {
    emits('batchDeletion', props.checkedList)
  }

  const batchDownload = () => {
    emits('batchDownload', props.checkedList)
  }
</script>

<style lang="less" scoped>
  .checkbox-control {
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    padding: 8px 0;
    width: 100%;
    height: 52px;
    font-size: 14px;
    text-align: center;
    background: #fff;
    box-shadow: 0 -1px 3px rgba(37, 37, 45, 0.2);
    line-height: 36px;

    .deselect-all {
      width: 124px;
      height: 100%;
      color: #009cf8;
      border-right: 1px solid #e8e8eb;

      &:hover {
        cursor: pointer;
      }
    }

    .number-of-selected {
      width: 121px;
      height: 100%;
      color: rgba(16, 16, 20, 0.95);
    }

    .batch-deletion {
      margin-right: 8px;
      width: 88px;
      height: 36px;
      background: #fff;
      border: 1px solid #d9d9db;
      border-radius: 6px;
      box-shadow: 0 2px 0 rgba(0, 0, 0, 0.043);

      &:hover {
        cursor: pointer;
      }
    }

    .batch-download {
      width: 88px;
      height: 36px;
      background: #fff;
      border: 1px solid #d9d9db;
      border-radius: 6px;
      box-shadow: 0 2px 0 rgba(0, 0, 0, 0.043);

      &:hover {
        cursor: pointer;
      }
    }
  }
</style>
